<template>
  <div>
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="21">
            <el-select
              v-model="listQuery.status"
              placeholder="小组状态"
              style="width:120px;"
              @change="handleFilter"
            >
              <el-option
                v-for="item in classify"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
            <el-input
              v-model="listQuery.title"
              placeholder="小组名"
              style="width:200px;"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.leader"
              style="width:200px;"
              placeholder="组长"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
          <el-col :span="3">
            <div style="width:100%">
              <el-button
                type="primary"
                size="medium"
                style="float:right;"
                @click="DialogVisible1= true"
              >创建小组</el-button>
            </div>
          </el-col>
        </el-row>
      </section>
    </div>
    <!-- 创建小组 -->
    <el-dialog :visible.sync="DialogVisible1" title="创建小组" width="780px">
      <el-form :model="form1">
        <el-form-item :label-width="formLabelWidth" label="小组名称">
          <el-input v-model="form1.title" style="width:600px;"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="小组介绍">
          <tinymce v-model="form1.about" style="width:600px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addTeam">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表格 -->
    <el-table
      ref="teamTable"
      :table-label="tableLabel"
      :table-data="listFilter.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="button" :min-width="30" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="handleCommand($event,scope.row)">
            <el-button type="primary">
              编辑
              <i class="el-icon-arrow-down el-icon--right"/>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">查看小组</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status === 'close'" command="2">开启小组</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.status === 'open'" command="2">关闭小组</el-dropdown-item>
              <el-dropdown-item command="3">转移小组</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!-- 转移小组 -->
    <el-dialog :visible.sync="DialogVisible2" title="转移小组" width="700px">
      <el-form :model="form2">
        <el-form-item :label-width="formLabelWidth" label="转移给">
          <el-input v-model="form2.leader" style="width:500px;" placeholder="请输入用户名"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleTransfer">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import ElTable from '@/components/Eltable'
import { getTeamInformation, updateGroup, getUserByName, addGroup } from '@/api/operate/teamtopic' // 数据接口
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
import { scrollTo } from '@/utils/scrollTo' // 上下滑动组件
import Pagination from '@/components/Pagination' // 分页组件
import Tinymce from '@/components/Tinymce' // 富文本组件
export default {
  components: {
    ElTable,
    Pagination,
    Tinymce
  },
  data() {
    return {
      formLabelWidth: '100px',
      DialogVisible1: false,
      DialogVisible2: false,
      form1: {
        title: '',
        about: ''
      },
      form2: {
        leader: ''
      },
      form2Data: [],
      listQuery: {
        title: '',
        status: '',
        leader: ''
      },
      listFilter: [],
      classify: [
        {
          label: '小组状态',
          value: ''
        },
        {
          label: '已开启',
          value: '已开启'
        },
        {
          label: '已关闭',
          value: '已关闭'
        }
      ],
      total: 0,
      currentpage: 1,
      pagesize: 20,
      Manage: {
        title: '查看',
        children: [
          {
            name: '查看小组'
          },
          {
            name: '关闭小组'
          },
          {
            name: '转移小组'
          }
        ]
      },
      tableLabel: [
        {
          label: '编号', width: '10', prop: 'id'
        }, {
          label: '名称', width: '30', prop: 'title', isOpera: true
        }, {
          label: '组长', width: '10', prop: 'ownerName', isOpera: true
        }, {
          label: '成员数', width: '10', prop: 'memberNum'
        }, {
          label: '话题数', width: '10', prop: 'threadNum'
        }, {
          label: '回复数', width: '10', prop: 'replyNum'
        }, {
          label: '状态', width: '10', prop: 'statusStr'
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 创建小组提交
    addTeam() {
      this.form1.ownerId = getUserId()
      this.form1.ownerName = getUserName()
      this.form1.tenantId = getTenantId()
      addGroup(this.form1).then(res => {
        this.$notify({
          title: '成功',
          message: '创建小组成功！',
          type: 'success',
          duration: 2000
        })
        this.getData()
      })
      this.DialogVisible1 = false
      this.tableData.unshift(this.form1)
    },
    // 转移小组
    handleTransfer() {
      if (!this.form2.leader) {
        this.$message('不能为空')
        return
      }
      getUserByName(this.form2.leader).then(response => {
        if (!response.data.item) {
          this.$message('用户不存在！')
        } else {
          this.DialogVisible2 = false
          this.form2Data.ownerName = response.data.item.ownerName
          this.form2Data.tenantId = response.data.item.tenantId
          updateGroup(this.form2Data).then(res => {
            this.$notify({
              title: '成功',
              message: '小组转移成功！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }
      })
    },
    // 筛选
    handleFilter() {
      this.listFilter = this.tableData.filter(item => {
        if (this.listQuery.leader && item.ownerName.toLowerCase().indexOf(this.listQuery.leader.toLowerCase()) < 0) return false
        if (this.listQuery.title && item.title.toLowerCase().indexOf(this.listQuery.title.toLowerCase()) < 0) return false
        if (this.listQuery.status && item.statusStr !== this.listQuery.status) return false
        return true
      })
      this.total = this.listFilter.length
    },
    clearParams() {
      this.listQuery.leader = ''
      this.listQuery.title = ''
      this.listQuery.status = ''
      this.getData()
    },
    // 接口获取数据
    getData() {
      getTeamInformation(getTenantId()).then(response => {
        response.data.items.map(item => {
          if (item.status === 'open') item.statusStr = '已开启'
          if (item.status === 'close') item.statusStr = '已关闭'
        })
        this.tableData = response.data.items
        this.total = response.data.items.length
        this.listFilter = response.data.items
      })
    },
    handleSizeChange(val) {
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    // 表格按钮
    handleCommand(command, row) {
      if (command === '1') {
        this.$message(`查看${row.title}`)
      } else if (command === '2') {
        if (row.status === 'open') {
          row.status = 'close'
          row.confirmTitle = '关闭'
        } else {
          row.status = 'open'
          row.confirmTitle = '开启'
        }
        this.$confirm(`是否确定${row.confirmTitle}小组`, `${row.confirmTitle}小组`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateGroup(row).then(response => {
            this.$notify({
              title: '成功',
              message: '小组修改完成！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          })
        })
      } else if (command === '3') {
        this.form2Data = row
        this.DialogVisible2 = true
      }
    }
  }
}
</script>

<style lang="scss">
.allsearch {
  margin-top: 0px;
  padding: 0;
  .search-content {
    width: 100%;
  }
}
</style>
